#include ("/_includes/_layout.html")
#@layout("员工管理", "wxmall,点步科技", "Wxmall社区","wxmall") 
#define content()
<div class="wrapper wrapper-content">
	<div class="content-tabs">
		<nav class="page-tabs J_menuTabs">
	       <div class="page-tabs-content" style="margin-left: 0px;">
	           <a href="#(webctx)/employee" class="J_menuTab active">员工管理</a>
	           <a href="#(webctx)/role" class="J_menuTab">角色权限</a>
	       </div>
	   	</nav>
	</div>
	<div class="content ibox-content">
		<div class="panel-body">
			<div style="float: left;">
				<a href="#(webctx)/employee/edit" class="btn btn-success">新增员工</a>
				
				<select id="role_sel" class="control-inline">
					<option value="">按角色</option>
                   	#for(role : roles)
                   		<option value="#(role.id)" #if(employee?? && employee.roleId ==role.id) selected="selected" #end>#(role.name)</option>
                   	#end
                </select>
				
				<select id="a_status_sel" class="control-inline">
					<option value="">全部</option>
					<option value="1" selected="selected">启用</option>
					<option value="0">已删除</option>
				</select>
			</div>
			<div id="pager" class="jqpager" style="margin-bottom: 1px; float: right;"></div>
		</div>
		<table id="mainTable" class="table table-striped table-bordered bootstrap-datatable datatable" border="0">
		  <thead>
			  <tr>
				<th><input type="checkbox" id="all" title="全选/反选" style="margin-right: 4px; vertical-align: middle;"/></th>
				<th><span style="vertical-align: middle;">&nbsp;&nbsp;登录账号</span></th>
				<th>员工姓名</th>
				<th>角色</th>
				<th>添加时间</th>
				<th>状态</th>
				<th>操作</th>
			  </tr>
		  </thead>   
		  <tbody class="itemsLotGrid"></tbody>
	  	</table>
	</div>   
</div>

<script type="text/html" id="item_table_tr_tpl">
{{each list as item i}}
		<tr class="package">
			<td>
				<input type="checkbox" class="commchk" id="checkbox_{{item.id}}" style="margin-right: 4px; vertical-align: middle;"/>
				<input type="hidden" value="{{item.id}}"/>
			</td>
			<td><span style="margin-right: 5px; margin-left: 2px; vertical-align: middle;">{{item.phone}}</span></td>
			<td><span style="margin-right: 5px; margin-left: 2px; vertical-align: middle;">{{item.empl_name}}</span></td>
			<td>{{item.name}}</td>
			<td>{{item.created}}</td>
			<td><span class="customer_status">{{if item.active == 1}} 启用 {{else}} <font color='red'>已删除</font> {{/if}}</span></td>
			<td>{{if item.is_owner==null || item.is_owner==false}}<a id="edit#{{item.id}}" href="javascript:void(0)">编辑</a> {{else}} <font color="red">拥有者</font> {{/if}}</td>
		</tr>
{{/each}}
</script>

<script type="text/template" id="table_noresult_tr_tpl">
	<tr class="package"><td colspan="7" class="center">没有结果集</td></tr>
</script>
#end
<script type="text/javascript">
$(document).ready(function() {
	var params = {};
	params.active = $("#a_status_sel").val();
	var table = new obz.TableView("pager", obz.ctx + "/employee/list", params, function(resp){
		$(".itemsLotGrid").empty();
		if(resp && resp.list && resp.list.length>0){
			$('.itemsLotGrid').html(template('item_table_tr_tpl', resp));
			//初始化checkbox点击事件
			TBatch.checkCheckbox();
			TBatch.initCheckboxClick();
			TBatch.initOptEvent(TableOpt.init());
		}else{
			$(".itemsLotGrid").append($("#table_noresult_tr_tpl").html());
		}
	});
	table.init();
	
	var TableOpt = {
		edit : function(param){
			location.href = "#(webctx)/employee/edit?id="+param[1]
			return false;
		},	
		init : function(){
			var optArray = new Array();
			optArray.push(this.edit);
			return optArray;
		}
	}
	
	$("#a_status_sel").change(function(){
		params.active = $("#a_status_sel").val();
		params.roleId = $("#role_sel").val();
		table.setParams(params);
		table.init();
	});
	
	$("#role_sel").change(function(){
		params.active = $("#a_status_sel").val();
		params.roleId = $("#role_sel").val();
		table.setParams(params);
		table.init();
	});
});
</script>